<template>
  <div class="banner-container">
    <!-- 搜索、更改名称和重新加载功能 -->
    <BannerTop 
      @search="search" 
      @changeName="changeName" 
      @reload="reload"
      class="banner-top"
    />

    <!-- 表格数据展示 -->
    <BannerList 
      @remove="remove" 
      :tableData="tableData" 
      :dataText="dataText" 
      :loading="loading"
      class="banner-list"
    />

    <!-- 分页控制 -->
    <PortraitPage 
      @changePOrL="changePOrL" 
      :total="total" 
      :page="page" 
      :limit="limit"
      class="banner-pagination"
    />
  </div>
</template>

<script>
import BannerTop from './components/BannerTop.vue'; // 引入 BannerTop 组件
import PortraitPage from './components/PortraitPage.vue'; // 引入 PortraitPage 组件
import BannerList from './components/BannerList.vue'; // 引入 BannerList 组件
import axios from 'axios'; // 引入 axios 用于发送 HTTP 请求

export default {
  name: 'Banner', // 定义组件名称
  components: {
    BannerTop, // 注册 BannerTop 组件
    PortraitPage, // 注册 PortraitPage 组件
    BannerList // 注册 BannerList 组件
  },
  data() {
    return {
      tableData: [], // 存储表格数据
      total: 0, // 总数据条数
      page: 1, // 当前页码
      limit: 10, // 每页显示的数据条数
      name: '', // 搜索关键字
      dataText: "暂无数据", // 表格无数据时显示的提示文字
      loading: false // 加载状态
    };
  },
  methods: {
    // 查询方法，根据是否有搜索关键字调用不同搜索方法
    search(name) {
      this.page = 1; // 搜索时重置页码为第一页
      if (name === '') {
        this.noConditionSearch(); // 无条件搜索
      } else {
        this.conditionSearch(name); // 条件搜索
      }
    },
    
    // 重新加载数据
    reload() {
      if (this.name === '') {
        this.noConditionSearch(); // 如果没有搜索关键字，执行无条件搜索
      } else {
        this.conditionSearch(this.name); // 否则执行有条件搜索
      }
    },
    
    // 更改分页参数
    changePOrL(page, limit) {
      this.page = page; // 更新当前页码
      this.limit = limit; // 更新每页显示条数
      if (this.name === '') {
        this.noConditionSearch(); // 如果没有搜索关键字，执行无条件搜索
      } else {
        this.conditionSearch(this.name); // 否则执行有条件搜索
      }
    },
    
    // 删除操作后重新加载数据
    remove() {
      this.noConditionSearch(); // 执行无条件搜索
    },
    
    // 条件搜索方法
    conditionSearch(name) {
      this.changeType(); // 切换加载状态
      axios
        .get(this.$global_msg.adminRoute + '/banner/showByName', { // 发送 GET 请求获取数据
          params: {
            page: this.page, // 当前页码（取消注释启用分页参数）
            limit: this.limit, // 每页显示条数（取消注释启用分页参数）
            name: this.name // 搜索关键字
          }
        })
        .then(a => {
          this.tableData = a.data.data; // 更新表格数据
          this.total = a.data.count; // 更新总数据条数
          this.changeType(); // 切换加载状态
        })
        .catch(e => {
          console.log(e); // 错误处理
          this.changeType(); // 切换加载状态
        });
    },
    
    // 无条件搜索方法
    noConditionSearch() {
      this.changeType(); // 切换加载状态
      axios
        .get(this.$global_msg.adminRoute + '/banner/showAll', { // 发送 GET 请求获取数据
          params: {
            page: this.page, // 当前页码
            limit: this.limit // 每页显示条数
          }
        })
        .then(res => {
          this.tableData = res.data.data; // 更新表格数据
          this.total = res.data.count; // 更新总数据条数
          this.changeType(); // 切换加载状态
        })
        .catch(response => {
          console.log(response); // 错误处理
          this.changeType(); // 切换加载状态
        });
    },
    
    // 更新搜索关键字
    changeName(name) {
      this.name = name; // 更新搜索关键字
    },
    
    // 切换加载状态和提示文字
    changeType() {
      this.loading = !this.loading; // 切换加载状态
      if (this.dataText === " ") {
        this.dataText = "暂无数据"; // 如果提示文字为空，设置为“暂无数据”
      } else {
        this.dataText = " "; // 否则设置为空
      }
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.banner-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 组件样式 */
.banner-top {
  margin-bottom: 10px;
}

.banner-list {
  flex-grow: 1;
}

.banner-pagination {
  margin-top: 10px;
  text-align: center;
}
</style>